<template>
    <div>
      <br>
      <el-row>
        <el-col span="4">
          <el-button type="success" @click="btnSubmitWork" size="small">添加生产线</el-button>
        </el-col>
      </el-row>
      <br/>
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        :data="flowList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="70">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="100">
        </el-table-column>
        <el-table-column
          prop="valid"
          label="是否有效"
          width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.valid == true">
              有效
            </span>
            <span v-if="scope.row.valid == false">
                无效
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createUserStr"
          width="80"
          label="创建人">
        </el-table-column>
        <el-table-column
          prop="createTimeStr"
          width="200"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="updateUserStr"
          width="100"
          label="修改人">
        </el-table-column>
        <el-table-column
          prop="updateTimeStr"
          width="200"
          label="修改时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-row>
              <el-button type="primary" icon="el-icon-edit" size="small"  @click="btnUpdate(scope.row.id,scope.row.name,scope.row.valid)" >编辑</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="params.pageNum"
        :page-size="params.pageSize"
        style="float: right;"
        layout="total, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total">
      </el-pagination>
      <el-dialog width="400px" title="添加生产线" :visible.sync="dialogFormVisible">
        <el-form ref="form" :rules="rules" :model="form">
          <el-row>
            <el-col span="24">
              <el-form-item prop="name" label="生产线名称：" :label-width="formLabelWidth">
                <el-input size="small" clearable
                          v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="24">
              <el-form-item prop="valid" label="是否启用：" :label-width="formLabelWidth">
                <el-switch v-model="form.valid"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" align="center" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="btnSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import * as workApi from '../api/work'
    export default {
        name: "flow_manager",
      data(){
          return{
            loading: false,
            flowList: [],
            total: 0,
            params: {
              pageNum: 1,
              pageSize: 5
            },
            dialogFormVisible: false,
            dialogDetailVisible: false,
            form: {
              id: '',
              name: '',
              valid: true
            },
            formLabelWidth: '120px',
            rules: {
              name: [
                {required: true, message: '生产线名称不可为空', trigger: 'blur'}
              ],
            },
          }
      },
      methods: {
        checkRole(){
          workApi.checkRole().then((res)=>{
            if(res.success == true){
                this.selectFlowVOPage(this.params.pageNum,this.params.pageSize)
            }else {
              this.$notify.error({
                title: '系统提示',
                message: res.message,
                duration: 3000
              });
              this.$router.push("/workflow/page/work_manage");
            }
          })
        },
        btnSubmitWork() {
          this.form.id = ''
          this.form.name = ''
          this.form.valid = true
          this.dialogFormVisible = true
        },
        btnSubmit(){
          this.$refs['form'].validate((valid) => {
            if (valid) {
              var params = this.form
              workApi.insertOrUpdateFlow(params).then((res)=>{
                if(res.success == true){
                  this.$message({
                    type: 'success',
                    message: res.message
                  });
                  this.dialogFormVisible=false
                  this.params.pageNum = 1
                  this.selectFlowVOPage(this.params.pageNum, this.params.pageSize)
                }else {
                  this.$message({
                    type: 'error',
                    message: res.message
                  });
                }
              })
            } else {
              this.$notify.error({
                title: '系统提示',
                message: '请先填写必填项！',
                duration: 2000
              });
            }
          })
        },
        handleSizeChange(val) {
          // 改变每页显示的条数
          this.params.pageSize = val
          // 点击每页显示的条数时，显示第一页
          this.selectFlowVOPage(1, this.params.pageSize)
          // 注意：在改变每页显示的条数时，要将页码显示到第一页
          this.params.pageNum = 1
        },
        handleCurrentChange(val) {
          // 改变默认的页数
          this.params.pageNum = val
          // 切换页码时，要获取每页显示的条数
          this.selectFlowVOPage(this.params.pageNum, this.params.pageSize)
        },
        selectFlowVOPage(pageNum,pageSize){
          this.loading = true
          var params = {
            pageNum: pageNum,
            pageSize: pageSize
          }
          workApi.selectFlowVOPage(params).then((res)=>{
            if(res.success == true){
              this.flowList = res.object.list
              this.total = res.object.total
              this.loading = false
            }else {
              this.$router.push("/login");
              this.loading = false
            }
          })
        },
        btnUpdate(id,name,valid){
          this.dialogFormVisible = true
          this.form.id = id
          this.form.name = name
          this.form.valid = valid
        }
      },
      mounted(){
        this.checkRole()
      }
    }
</script>

<style scoped>

</style>
